﻿var areaPanelOpt = {
  html: function( param ) {
    let _this = this,
      itemHtml_sheng = ``,
      itemHtml_shi = ``,
      itemHtml_xian = ``;
     
    // sheng
    for ( let x = 0; x < param.length; x++ ) {
      var areacodelen=param[x].areacode.length;
      var obj=param[x];
    
      if(areacodelen == 2){  //省
        itemHtml_sheng += `<li class="area_conts_item"
        enname="${obj.enname }"
        areaCode="${ obj.areacode }">${ obj.areaname } </li>`;     
      }else if(areacodelen == 4){  //市
        itemHtml_shi += `<li class="area_conts_item"  
        enname="${ obj.enname }" 
        areaCode="${ obj.areacode }">${ obj.areaname }</li>`; 
      }else{  //县
        itemHtml_xian += `<li class="area_conts_item" 
        enname="${ obj.enname }" 
        areaCode="${ obj.areacode }">${ obj.areaname }</li>`;  
      }     
    }

    let thisHtml = `<div class="areaChangePanel">
                      <ul class="area_type">
                        <li class="area_type_item">省</li>
                        <li class="area_type_item">州/市</li>
                        <li class="area_type_item">区/县</li>
                      </ul>
                      <div class="area_conts">
                        <ul class="area_conts_list"> ${ itemHtml_sheng } </ul>
                        <ul class="area_conts_list"> ${ itemHtml_shi } </ul>
                        <ul class="area_conts_list"> ${ itemHtml_xian } </ul>
                      </div>
                      <div class="area_button">
                        <button type="button" id="qd">确定</button>
                        <button type="button" id="qx">取消</button>
                      </div>
                    </div>`;
    return thisHtml;
  },
  redrawPanel: function( param ) {
    let _this = this,
      thisView = ``;

    if ( param.areacode.length != 6 ) {
      if ( param.areacode.length == 2 ) {//点击省出对应的市
        param.siblingElmts.text("");
        for ( let x = 0; x < param.data.length; x++ ) {
          let vt = param.data[x];
          //市的编码的前两位等于所需选择省编码
          if(vt.areacode.length==4 && vt.areacode.substring(0,2)== param.areacode){
            // if ( vt.areacode.indexOf( param.areacode ) > -1 ) {
              thisView += `<li class="area_conts_item" 
                enname="${ vt.enname }" 
                areaCode="${ vt.areacode }">${ vt.areaname }</li>`;  
            // }
          }
        }
      } else {//点击对应的市出对应的县
        for ( let x = 0; x < param.data.length; x++ ) {
          let vt = param.data[x];
          //市的编码的前两位等于所需选择省编码
          if(vt.areacode.length==6 && vt.areacode.substring(0,4)== param.areacode){
              thisView += `<li class="area_conts_item" 
                enname="${ vt.enname }" 
                areaCode="${ vt.areacode }">${ vt.areaname }</li>`;  
          }
        }
      }
    }

    param.parentElmt.textContent = "";
    param.parentElmt.insertAdjacentHTML( "beforeEnd", thisView );
    thisView = null;
  },
  getData: function() {
    let _this = this,
      resultData = [];

    $.ajax({
      url: "./assets/localData/T_AREA.json",
      type: "get",
      dataType: "json",
      async: false,
      success: function( result ) {
        if ( result ) {
          resultData = result.RECORDS;
        } else {
          
        }
      },
      error: function( error ) {
        console.log("区域数据请求失败！");
      }
    });

    return resultData;
  },

  init: function() {
    let _this = this,
      bodyView = document.body,
      thisData = _this.getData(),
      thisView = bodyView.querySelector(".areaChangePanel");

    if ( thisView ) return false;

    bodyView.insertAdjacentHTML( "beforeEnd", _this.html( thisData ) );

    // panel option event
    $(".area_conts_list:first li:first").addClass("crt");

    $(".area_type_item").on( "click", function() {
      let index = $(this).index();
      console.log($(this).html);
      $(this).addClass('active_li').siblings().removeClass('active_li');
      $(".area_conts_list").eq( index ).show().siblings().hide();
    });
    $(".area_type_item").eq(0).click();

    $(".area_conts_list").on( "click", ".area_conts_item", function() {
      $(this).addClass('crt').siblings().removeClass('crt');
      if ( $(this).parent().next()[0] ) {
        _this.redrawPanel({
          data: thisData,
          areacode: $(this).attr("areacode"),
          parentElmt: $(this).parent().next()[0],
          siblingElmts: $(this).parent().siblings()
        });
        // $(".area_conts_list").hide();
        // $(this).parent().next().show();
      }
    });

    //点击确定
    $("#qd").on("click",function(){
      let item = $(".area_conts_item.crt"), 
        current = item.eq( item.length - 1 ),
        text = current.text(),
        areaCode = current.attr("areaCode");

      $("#addr-show02").text( text );
      $("#addr-show02").attr( "areaCode", areaCode );
      $(".areaChangePanel").hide();
      Global.currentAreaCode = areaCode;//add by heyao
      Global.currentAreaName = text;
      var  areaName=$("#addr-show02").text();
 window.localStorage.setItem("areaCode", areaCode);
       /*获取导航和查询组件*/
        getNav(areaName);
        changeUI();
      /*模板选择行政区初始化*/
      countryArea.init(areaCode);
      //省市县选择
      area.init(areaCode);
   /*自定义站初始化*/
     customizeStation.init(areaCode);
    })
    //点击取消
    $("#qx").on("click",function(){
      $(".areaChangePanel").hide();
    })
  }
};
